<!--
 * @Author: luoyuhuan 17738694556@163.com
 * @Date: 2025-04-03 14:34:18
 * @LastEditors: luoyuhuan 17738694556@163.com
 * @LastEditTime: 2025-04-30 11:10:08
 * @FilePath: \ranyu_anchor_new\src\views\liveManage\microphoneRatio\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 麦位分成 -->
  <div class="app-container">
    <reservation-list-container
      :actionButtons="actionButtons"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :showResetButton="false"
      :showPagination="false"
      @sort-change="handleSortChange"
    ></reservation-list-container>
    <RatioSetting ref="RatioSettingRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import RatioSetting from "./components/RatioSetting.vue";
import ReservationListContainer from "@/components/PageTable/ReservationList.vue";

const RatioSettingRef = ref();

// 操作按钮配置
const actionButtons = [
  {
    text: "修改分成比例",
    handler: () => {
      RatioSettingRef.value.show();
    },
    type: "primary" as "primary",
    icon: undefined,
    loading: false,
  },
];

// 表格列配置
const columns = [
  {
    prop: "ratio",
    label: "分成比例",
    width: "300px",
  },
  {
    prop: "time",
    label: "修改时间",
    width: "300px",
  },
];

// 表格数据
const tableData = ref([
  {
    ratio: "比例比例比例比例",
    time: "2025-02-18 15:00:00",
  },
]);

const loading = ref(false);

// 排序变化方法
const handleSortChange = (sortInfo: any) => {
  console.log("排序变化", sortInfo);
};
</script>
<style lang="scss" scoped></style>
